@charset "utf-8";

* {margin: 0; padding: 0; box-sizing: border-box;}

html {font-size: calc(100vw/7.5);}
body {touch-action: none; overflow-x: hidden; color: #333; background-color: #026abf;}

button {display: block; width: 3.3rem; height: .62rem; line-height: .62rem; text-align: center; margin: .3rem auto 0; background-color: #2158b9; color: #fff; font-size: .32rem; border-radius: .62rem; font-weight: bolder; border: none;}
i,img {display: block;}
.flex {display: -webkit-flex !important; display: flex !important;}
.flex.items-center {align-items: center;}
.center {text-align: center;}

.pop-bg {position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,.44); z-index: 999; justify-content: center; align-items: center; display: none;}
.pop-bg .pop-box {width: 6.9rem; background-color: #fff; border-radius: .1rem; padding: .4rem .17rem; display: none;}
.pop-bg .pop-box .loading {margin: 0 auto;}
.pop-bg .pop-box .rule-content-box {margin-top: .25rem; height: 45vh; overflow: auto;}
.pop-bg .pop-box .rule-content-box h1 {font-size: .3rem; color: #134499; margin-bottom: .32rem;}
.pop-bg .pop-box .rule-content-box p {padding-left: .67rem; font-size: .24rem; line-height: .38rem; margin-bottom: .3rem;}
.pop-bg .pop-box .upload-demo-text {text-align: center; padding: .32rem 0 .28rem; color: #134499; font-size: .28rem; line-height: .38rem; font-weight: bold;}
.pop-bg .pop-box .upload-demo-box {width: 5rem; justify-content: space-between; margin: 0 auto;}
.pop-bg .pop-box .upload-demo-box .upload-demo-item {width: 2.32rem;}
.pop-bg .pop-box .upload-demo-box .upload-demo-item span {display: block; width: .38rem; height: .38rem; line-height: .38rem; border: #2158b9 .03rem solid; border-radius: 50%; text-align: center; color: #2158b9; font-size: .26rem; font-weight: bold; margin: .3rem auto 0;}
.pop-bg .pop-box .pop-lottery-box {margin-top: .86rem; text-align: center; font-size: .28rem; line-height: .38rem; color: #134499;}
.pop-bg .pop-box .pop-lottery-tips {font-size: .24rem; line-height: .38rem; color: #818181; width: 5.15rem; margin: 1.05rem auto 0;}
.pop-bg .pop-box#failed .pop-lottery-tips {margin-top: .5rem;}
.pop-bg .pop-box .lose {width: 2.48rem; margin: 0 auto;}
.pop-bg .pop-box .gift-text-box {text-align: center; font-size: .28rem; line-height: .38rem; color: #134499; margin: .8rem auto 0; font-weight: bold; width: 4.6rem;}
.pop-bg .pop-box .tips-box {border-top: #a3a2a2 1px dashed; width: 5.24rem; padding: .35rem 0; font-size: .24rem; color: #818181; line-height: .38rem; margin: .5rem auto 0;}
.pop-bg .pop-box .tips-box.nb {border-top: none;}
.pop-bg .pop-box .pop-add-box {margin-top: .3rem;}
.pop-bg .pop-box .pop-add-box input[type="text"] {display: block; width: 4.06rem; height: .8rem; line-height: .8rem; margin: 0 auto .3rem; font-size: .28rem; padding: 0 .15rem; border-radius: .1rem; border: #108dd8 1px solid;}
.pop-bg .pop-box .pop-add-box textarea {display: block; width: 4.06rem; height: 1.36rem; margin: 0 auto .3rem; font-size: .28rem; padding: .15rem; border-radius: .1rem; border: #108dd8 1px solid;}


.page {min-height: 11.37rem; background-image: url("../img/bg.jpg"); background-size: 100%; background-repeat: no-repeat; padding-top: .43rem;}
.page.lottery {background-image: url("../img/bg_lottery.jpg"); padding-top: .38rem;}
.page .gift-card {margin-top: -.14rem;}
.page .bottom-box {position: absolute; width: 100%; left: 0; bottom: 0;}
.page .info-text {margin-bottom: 1rem; position: relative; z-index: 2;}
.page .info-text1 {margin-bottom: .22rem;}
.page .bottom-box .btn-box {position: absolute; width: 3.23rem; height: 1.02rem; background-image: url("../img/button_bg.png"); background-repeat: no-repeat; background-size: 100%; left: 50%; bottom: .82rem; margin-left: -1.61rem; font-size: .48rem; color: #fff; text-align: center; line-height: 1.02rem;}
.page .bottom-box .rule-btn {position: absolute; width: 2.23rem; height: .38rem; background-image: url("../img/rule_btn.png"); background-repeat: no-repeat; background-size: 100%; left: 50%; bottom: .22rem; margin-left: -1.11rem;}
.page .bottom-box .share-btn {width: 1.01rem; margin: 0 auto .5rem;}
.page .bottom-box .coming-soon {width: 1.6rem; margin: 0 auto .95rem;}
.page .box {background-color: #fff; width: 6.9rem; margin: 1.3rem auto; padding: .4rem .8rem; border-radius: .2rem;}
.page .box.list {margin: .1rem auto; background-color: rgba(255,255,255,.94); height: 62vh; overflow: auto;}
.page .box .choose-box {padding-top: .6rem;}
.page .box .choose-box .choose-box-item {width: 3.1rem; height: .5rem; line-height: .5rem; text-align: center; background-color: #818181; border-radius: .1rem; margin: 0 auto .5rem; color: #fff; font-size: .32rem; font-weight: bold;}
.page .box .choose-box .choose-box-item.onthis {background-color: #176afd;}
.page .box .tips-box {border-top: #a3a2a2 1px dashed; padding: .35rem 0; font-size: .24rem; color: #818181; line-height: .38rem;}
.page .box .upload-box {justify-content: center; padding: .3rem 0;}
.page .box .upload-box .upload-box-item {width: 2.08rem; height: 2.08rem; border-radius: .1rem; background-color: #c4c4c4; position: relative; display: -webkit-flex; display: flex; justify-content: center; align-items: center; margin-right: .42rem;}
.page .box .upload-box .upload-box-item:last-child {margin-right: 0;}
.page .box .upload-box .upload-box-item img {max-width: 100%; max-height: 100%;}
.page .box .upload-box .upload-box-item .upload-icon {width: 1.12rem;}
.page .box .upload-box .upload-box-item .upload-icon2 {width: .9rem;}
.page .box .upload-box .upload-box-item input[type='file'] {position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0;}
.page .box .btn-box button {width: 2.3rem;}
.page .box .list-box {margin-bottom: .4rem;}
.page .box .list-box h1 {font-size: .3rem; color: #006bbf; text-align: center; margin-bottom: .32rem;}
.page .box .list-box ul li {list-style: none; text-align: center; font-size: .22rem; margin-bottom: .25rem;}
.page .box .list-box ul li span {margin-right: .25rem;}
.page .lottery-box {width: 6.38rem; height: 6.53rem; background-image: url("../img/lotter_bg.png"); background-size: 100%; margin: 0 auto; position: relative;}
.page .lottery-box .start {position: absolute; width: 100%; left: 0; top: 0;}
.page .lottery-list-box {margin-top: 1.3rem;}
.page .lottery-list-box .lottery-list-item {margin: 0 auto .25rem; background-color: rgba(255,255,255,.8); width: 5.4rem; height: .53rem; line-height: .53rem; font-size: .22rem; color: #414141; text-align: center; border-radius: .1rem;}
.page .lottery-list-box .lottery-list-item span:first-child {margin-right: .2rem;}
.page .qr-code {width: 4.02rem; margin: -.05rem auto .3rem;}



